<template>
 <div class="box">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>基本资料</span>
  </div>
  <el-form :rules="userFormRules" :model="userForm" ref="userFormRef" label-width="80px" >
  <el-form-item label="登陆名称" prop="username">
    <el-input v-model="userForm.username" disabled></el-input>
  </el-form-item>
  <el-form-item label="用户昵称" prop="nickname">
    <el-input v-model="userForm.nickname"></el-input>
  </el-form-item>
  <el-form-item label="用户邮箱" prop="email">
    <el-input v-model="userForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitFn">提交修改</el-button>
    <el-button @click="resetFn">重置</el-button>
  </el-form-item>
</el-form>
</el-card>
 </div>
</template>

<script>
import {updateUserInfoAPI} from '@/api'
export default {
    name:'userInfo',
    data() {
        return {
            userForm:{
                //默认值用登陆后获取到的用户名
                username: this.$store.state.userInfo.username,
                nickname:'',
                email:''
            },
            //表单验证对象
            userFormRules:{
                nickname:[
                    //trigger规则触发条件，blur失去焦点时触发
                    {required:true,message:'请输入用户昵称',trigger:'blur'},
                    //校验规则
                    {pattern:/^\S{1,10}$/,message:'昵称必须是1-10位的非空字符串',trigger:'blur'}
                ],
                email:[
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    {type:'email',message:'邮箱格式不正确',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        //提交修改
        submitFn(){
            this.$refs.userFormRef.validate(async valid=>{
                if(valid){
                    //给userForm表单添加id,id存在vuex，state中的userinforn中
                    this.userForm.id = this.$store.state.userInfo.id
                    // 调用更新用户基本信息接口，把用户在页面输入的新内容传给后台保存
                    const {data:res} =  await updateUserInfoAPI(this.userForm)
                    if(res.code !==0) return this.$message.error('更新用户信息失败！')
                    //更新用户信息成功，刷新Vuex中的数据
                    this.$message.success('更新成功')
                    // 重新让Vuex获取下最新的用户数据
                    this.$store.dispatch('initUserInfo')
                }else{
                    //验证失败
                    return false;
                }
            })
        },
        resetFn(){
            //1.
            this.userForm.nickname = '',
            this.userForm.email = ''
            //2.el-from自带的重置方法
            this.$refs.userFormRef.resetFields()
        }
    }

}
</script>

<style lang="less" scoped>
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  .box{
    // display: flex;
    // width: 500px;
    // height: 500px;
    // border: 1px solid #465468;
    // justify-content: center;
    // align-items: center;
   
    width: 600px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 0 30px;
      box-sizing: border-box;
  }
</style>